<!DOCTYPE html>
<html>

<head>
    <title>短信验证码测试</title>
    <script src="js/vue-2.5.16.js"></script>
    <script src="js/axios-0.18.0.min.js"></script>
    <script src="js/host.js"></script>
</head>

<body>
    <div id="app">
        <h2>短信验证码功能测试</h2>
        <div>
            <label>手机号:</label>
            <input v-model="mobile" type="text" placeholder="请输入手机号">
        </div>
        <div>
            <label>图形验证码:</label>
            <input v-model="image_code" type="text" placeholder="请输入图形验证码">
            <img :src="image_code_url" @click="generate_image_code" alt="图形验证码" style="cursor: pointer;">
        </div>
        <div>
            <button @click="send_sms_code" :disabled="sending_flag">{{ sms_code_tip }}</button>
        </div>
        <div v-if="error_message" style="color: red;">
            {{ error_message }}
        </div>
        <div v-if="success_message" style="color: green;">
            {{ success_message }}
        </div>
        <div>
            <h3>调试信息:</h3>
            <pre>{{ debug_info }}</pre>
        </div>
    </div>

    <script>
        function generateUUID() {
            var d = new Date().getTime();
            if (window.performance && typeof window.performance.now === "function") {
                d += performance.now(); //use high-precision timer if available
            }
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        }

        var vm = new Vue({
            el: '#app',
            data: {
                host: host,
                mobile: '18761233821',
                image_code: '',
                image_code_id: '',
                image_code_url: '',
                sms_code_tip: '获取短信验证码',
                sending_flag: false,
                error_message: '',
                success_message: '',
                debug_info: ''
            },
            mounted: function () {
                this.generate_image_code();
                this.debug_info = '页面加载完成\n';
                this.debug_info += 'host: ' + this.host + '\n';
            },
            methods: {
                generate_image_code: function () {
                    this.image_code_id = generateUUID();
                    this.image_code_url = this.host + "/image_codes/" + this.image_code_id + "/";
                    this.debug_info += "生成图形验证码: " + this.image_code_url + "\n";
                },
                send_sms_code: function () {
                    this.error_message = '';
                    this.success_message = '';

                    if (this.sending_flag) {
                        return;
                    }

                    // 验证手机号
                    var re = /^1[3-9]\d{9}$/;
                    if (!re.test(this.mobile)) {
                        this.error_message = '请输入正确的手机号码';
                        return;
                    }

                    // 验证图形验证码
                    if (!this.image_code) {
                        this.error_message = '请填写图形验证码';
                        return;
                    }

                    this.sending_flag = true;

                    var url = this.host + '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code
                        + '&image_code_id=' + this.image_code_id;

                    this.debug_info += "请求URL: " + url + "\n";

                    this.debug_info += "请求头: " + JSON.stringify({
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }) + "\n";

                    axios.get(url, {
                        responseType: 'json',
                        withCredentials: true,
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    })
                        .then(response => {
                            this.debug_info += "响应成功: " + JSON.stringify(response.data) + "\n";
                            this.success_message = '短信验证码发送成功！';

                            // 倒计时60秒
                            var num = 60;
                            var t = setInterval(() => {
                                if (num == 1) {
                                    clearInterval(t);
                                    this.sms_code_tip = '获取短信验证码';
                                    this.sending_flag = false;
                                } else {
                                    num -= 1;
                                    this.sms_code_tip = num + '秒';
                                }
                            }, 1000);
                        })
                        .catch(error => {
                            this.debug_info += "请求失败: " + error.message + "\n";
                            this.debug_info += "错误类型: " + error.name + "\n";
                            this.debug_info += "错误配置: " + JSON.stringify(error.config || {}) + "\n";

                            if (error.response) {
                                this.debug_info += "响应状态: " + error.response.status + "\n";
                                this.debug_info += "响应数据: " + JSON.stringify(error.response.data) + "\n";
                                if (error.response.status == 400) {
                                    this.error_message = error.response.data.errmsg || error.response.data.message || '请求失败';
                                } else {
                                    this.error_message = '服务器错误，请稍后重试';
                                }
                            } else if (error.request) {
                                this.debug_info += "请求已发送但没有响应\n";
                                this.debug_info += "请求详情: " + JSON.stringify(error.request) + "\n";
                                this.error_message = '服务器无响应，请检查网络连接';
                            } else {
                                this.debug_info += "请求配置错误\n";
                                this.error_message = '网络错误，请检查连接';
                            }
                            this.sending_flag = false;
                        });
                }
            }
        });
    </script>
</body>

</html>